<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<!DOCTYPE html>
		<html>

		<head>
			<meta charset="UTF-8">
			<title></title>
			<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
			<link rel="stylesheet" type="text/css" href="../common/css/jquery-weui.min.css" />
			<link rel="stylesheet" type="text/css" href="../common/css/weui.min.css" />
			<link rel="stylesheet" type="text/css" href="../common/iconfont/iconfont.css" />
			<script src="../common/js/av-min-2.1.2.js" type="text/javascript" charset="utf-8"></script>
			<script src="../common/js/base.js" type="text/javascript" charset="utf-8"></script>
			<script src="../common/js/vue.js" type="text/javascript" charset="utf-8"></script>
			<style type="text/css">
				* {
					padding: 0px;
					margin: 0px;
				}
				
				body {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					background-color: white;
					font-family: "微软雅黑";
				}
				
				.header {
					height: 45px;
					line-height: 45px;
					background: #F2F2F2;
					color: #252525;
					font-size: 18px;
					text-align: center;
					position: relative;
				}
				
				.header>.icon {
					position: absolute;
					top: 0px;
					left: 0px;
				}
				
				.list {
					display: -webkit-box;
					height: 55px;
					border-bottom: 1px solid #F1F2F4;
					-webkit-box-align: center;
					font-size: 16px;
				}
				
				.list div {
					margin-left: 15px;
					width: 80px;
					text-align: center;
				}
				
				.list input {
					height: 100%;
					display: -webkit-box;
					-webkit-box-flex: 1;
					outline: none;
					border: none;
					font-size: 14px;
					margin-left: 5px;
					/*color: #7A7A7A;*/
				}
				
				.btn {
					display: -webkit-box;
					-webkit-box-pack: center;
					position: fixed;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 60px;
				}
				
				.btn .addbtn {
					display: -webkit-box;
					-webkit-box-pack: center;
					-webkit-box-align: center;
					width: 200px;
					height: 40px;
					background-color: #F23030;
					font-size: 16px;
					color: white;
				}
			</style>
		</head>

		<body>
			<div>
				<div class="header">
					<i class="icon Hui-iconfont">&#xe6d4;</i>新建收货地址
				</div>
				<div class="list">
					<div>收货人：</div>
					<input type="" name="" id="" placeholder="请输入收货人姓名"  v-model="username" />
				</div>
				<div class="list">
					<div>手机号码：</div>
					<input type="" name="" id="" placeholder="请输入11位手机号码"v-model="phone" />
				</div>
				<div>
					<div class="weui-cell">
						<div class="weui-cell__hd"><label for="name" class="weui-label" style="text-align: center;width: 80px;">所在地区：</label></div>
						<div class="weui-cell__bd">
							<input class="weui-input" style="font-size: 14px;margin-left: 5px;color: #7A7A7A;" id="start" type="text" placeholder="选择所在地址" v-model="area">
						</div>
					</div>
				</div>
				<div class="list">
					<div>详情地址：</div>
					<input type="" name="" id="" placeholder="详细地址" v-model="address"/>
				</div>
				<div class="btn">
					<div class="addbtn" @click="save">保存收货地址</div>
				</div>
			</div>
			<script src="../common/js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
			<script src="../common/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="../common/js/fastclick.js" type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript">
				$(function() {
					FastClick.attach(document.body);
				});

				$(".swiper-container").swiper({
					loop: true,
					autoplay: 3000
				});
			</script>
			<script src="../common/js/jquery-weui.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="../common/js/city-picker.js" type="text/javascript" charset="utf-8"></script>
			<script>
				$("#start").cityPicker({
					title: "选择出发地",
					onChange: function(picker, values, displayValues) {
						console.log(values, displayValues);
					}
				});
			</script>
			<script src="js/addAddressVue.js" type="text/javascript" charset="utf-8"></script>
		</body>

		</html>
	</body>

</html>